<template>
	<div class="keywords" :style="{ padding: maximize ? '0' : '10px' }">
		<div
			class="keywords-utils"
			:style="{
				'box-shadow': maximize
					? 'unset'
					: '0 0 20px rgba(0, 0, 0, 0.15)',
			}"
		>
			<mac-header :maximize.sync="maximize" />
			<keywords-table />
		</div>
	</div>
</template>

<script>
import MacHeader from "./components/MacHeader.vue";
import KeywordsTable from "./components/KeywordsTable.vue";
export default {
	components: { MacHeader, KeywordsTable },
	data() {
		return {
			maximize: false,
		};
	},
};
</script>

<style lang="scss">
.keywords {
	height: 100vh;
	padding: 10px;
	.keywords-utils {
		height: 100%;
		overflow: hidden;
		border-radius: 15px;
		background-color: #fff;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	}
}
</style>
